<template>
  <!-- 废弃 -->
  <div class="page-data-show">
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card class="tab-data order-tab-data">
          <div class="order-tab-title">
            <img src="" alt="orderTab" >
            <p>渠道订单</p>
          </div>
          <div class="order-tab-list">
            <div v-for="(item, i) in orderTab" :key="i" class="order-tab-item" @click="orderTabClick(item)">
              {{ item.name }}   {{ item.num | numFormat }}
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="tab-data order-tab-data">
          <div class="order-tab-title">
            <img src="" alt="orderTab" >
            <p>项目订单</p>
          </div>
          <div class="order-tab-list">
            <div v-for="(item, i) in projectTab" :key="i" class="order-tab-item" @click="projectTabClick(item)">
              {{ item.name }}   {{ item.num | numFormat }}
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="tab-data seal-tab-data">
          <div class="seal-tab-title">
            <img src="" alt="sealTab" >
            <p>财务封账</p>
          </div>
          <div class="seal-tab-list">
            <div v-for="(item, i) in sealBillTab" :key="i" class="seal-tab-item" @click="sealTabClick(item)">
              {{ item.name }}   {{ item.num | numFormat }}
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="tab-data calendar-tab-data">
          <div class="calendar-tab-title">
            <img src="" alt="calendarTab" >
            <p>预约日历</p>
          </div>
          <div class="calendar-tab-list">
            <div v-for="(item, i) in orderCalendarTab" :key="i" class="calendar-tab-item" @click="calendarTabClick(item)">
              {{ item.name }}   {{ item.num | numFormat }}
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="tab-data client-tab-data">
          <div class="client-tab-title">
            <img src="" alt="clientTab" >
            <p>客户结算</p>
          </div>
          <div class="client-tab-list">
            <div v-for="(item, i) in clientTab" :key="i" class="client-tab-item" @click="clientTabClick(item)">
              {{ item.name }}   {{ item.num | numFormat }}
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="tab-data supplier-tab-data">
          <div class="supplier-tab-title">
            <img src="" alt="supplierTab" >
            <p>供应商结算</p>
          </div>
          <div class="supplier-tab-list">
            <div v-for="(item, i) in supplierTab" :key="i" class="supplier-tab-item" @click="supplierTabClick(item)">
              {{ item.name }}   {{ item.num | numFormat }}
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { numFormat } from '@/filters/number';
export default {
  name: 'PageDataShow',
  filters: { numFormat },
  props: {
    orderTab: {
      type: Array,
      default: () => []
    },
    projectTab: {
      type: Array,
      default: () => []
    },
    sealBillTab: {
      type: Array,
      default: () => []
    },
    supplierTab: {
      type: Array,
      default: () => []
    },
    orderCalendarTab: {
      type: Array,
      default: () => []
    },
    clientTab: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    // 渠道订单
    orderTabClick(item) {
      let query;
      if (item.name === '待核销') {
        query = {
          accountState: 0
        };
      } else if (item.name === '部分核销') {
        query = {
          accountState: 2
        };
      } else if (item.name !== '待核销' || item.name !== '部分核销') {
        query = {
          process: item.id
        };
      }
      this.$router.push({
        name: 'allOrder',
        query
      });
    },
    // 项目订单
    projectTabClick(item) {
      let query;
      if (item.name === '待核销') {
        query = {
          verificationState: 0
        };
      } else if (item.name === '部分核销') {
        query = {
          verificationState: 2
        };
      } else if (item.name !== '待核销' || item.name !== '部分核销') {
        query = {
          projectStatus: item.id
        };
      }
      this.$router.push({
        name: 'projectList',
        query
      });
    },
    // 财务封账
    sealTabClick(item) {
      let query;
      if (item.name === '待审批订单') {
        query = {
          processState: 2
        };
      } else {
        query = {
          processState: item.id
        };
      }
      this.$router.push({
        name: 'sealingAccount',
        query
      });
    },
    // 预约日历
    calendarTabClick(item) {
      let query;
      const firstDate = new Date();
      firstDate.setDate(1);
      const endDate = new Date(firstDate);
      endDate.setMonth(firstDate.getMonth() + 1);
      endDate.setDate(0);
      if (item.name === '本月待确认') {
        query = {
          status: 0
        };
      } else {
        query = {
          status: 1
        };
      }
      query.firstDate = firstDate.getTime();
      query.endDate = endDate.getTime();
      this.$router.push({
        name: 'subcribe',
        query
      });
    },
    // 客户结算
    clientTabClick(item) {
      let query;
      if (item.name === '审批通过') {
        query = {
          examineStatus: 1
        };
      } else if (item.name === '审批驳回') {
        query = {
          examineStatus: 2
        };
      } else {
        query = {
          status: 0
        };
      }
      this.$router.push({
        name: 'customersettle',
        query
      });
    },
    // 供应商结算
    supplierTabClick(item) {
      this.$router.push({
        name: 'supplier',
        query: { status: item.id }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.page-data-show {
  .tab-data {
    border-radius: 12px;
    min-height: 180px;
    margin-bottom: 12px;
  }
  .order-tab-data {
    .order-tab-list {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      .order-tab-item {
        width: 50%;
        cursor: pointer;
      }
    }
  }
  .seal-tab-item {
    width: 50%;
    cursor: pointer;
  }
  .client-tab-item {
    width: 50%;
    cursor: pointer;
  }
  .supplier-tab-item {
    width: 50%;
    cursor: pointer;
  }
  .calendar-tab-item {
    width: 50%;
    cursor: pointer;
  }
}
</style>
